import React from 'react';
import Top from './top'
import './App.css';

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      arr:[],
      inputVal:'',
      img:''
    }
  }
  render () {
    return (
      <div className="App">
          <Top arr={this.state.arr}></Top>
          <div className="con">
            <img ref="img"/>
              <input type="file" onChange={(event)=>{
                console.log(event.target)
                // 文件读取器
                var reader = new FileReader()
                // 读取成功后，执行回调
                reader .onload = (event)=>{
                  this.refs.img.src = event.target.result
                } 
                // 读取文件
                reader.readAsDataURL(event.target.files[0])
              }}/><br/>
              <input type="text" ref="input"/>
              <p>
                <button 
                  onClick={()=>{
                    // console.log(event.target)
                    
                    this.state.arr.push({
                      title:this.refs.input.value,
                      img:this.refs.img.src
                    })
                    // console.log(this.state.arr)
                    this.setState({
                      arr:this.state.arr
                    })
                    this.refs.input.value=''
                    this.refs.img.src=''
                  }}
                >提交</button>
              </p>
          </div>
      </div>
    );
  }
}

export default App;
